class Snake {
    head: HTMLElement; //获取蛇头
    bodies: HTMLCollection //表示蛇的身体 包括蛇头 HTMLCollection表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性。
    element: HTMLElement //表示蛇的容器
    parentEle: HTMLElement;
    parentNodeIdName: string
    constructor(parentNodeIdName: string = 'stage') {
        this.element = document.getElementById('snake')!;
        this.head = document.querySelector("#snake > div") as HTMLElement;
        this.bodies = this.element.getElementsByTagName('div');
        this.parentEle = document.getElementById(parentNodeIdName)!;
        this.parentNodeIdName = parentNodeIdName
    }
    get x() {
        return this.head.offsetLeft
    }
    get y() {
        return this.head.offsetTop
    }
    //设置蛇头坐标位置
    setX(value: number) {
        if (this.x === value) return
        let maxXNum = this.parentEle.clientWidth - 10
        if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value) {
            if (value > this.x) {
                value = this.x - 10
            } else {
                value = this.x + 10
            }
        }
        if (value < 0 || value > maxXNum) {
            // 表示蛇已经撞墙了 游戏结束
            throw new Error('蛇撞墙了！')
        }
        this.moveBody()
        this.head.style.left = value + 'px';
        this.checkHeadBody()
    }
    setY(value: number) {
        if (this.y === value) return
        let maxXNum = this.parentEle.clientWidth - 10
        if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value) {
            if (value > this.y) {
                value = this.y - 10
            } else {
                value = this.y + 10
            }
        }
        if (value < 0 || value > maxXNum) {
            // 表示蛇已经撞墙了 游戏结束
            throw new Error('蛇撞墙了！')
        }
        this.moveBody()
        this.head.style.top = value + 'px';
        this.checkHeadBody()
    }
    // setHead(x: number, y: number) {
    //     if (this.x === x && this.y === y) return
    //     //判断x的值是否在合理范围

    //     let maxYNum = this.parentEle.clientHeight - 10
    //     if (x < 0 || x > maxXNum || y < 0 || y > maxYNum) {
    //         // 表示蛇已经撞墙了 游戏结束
    //         throw new Error('蛇撞墙了！')
    //     }

    //     if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === y) {
    //         console.log(y, this.y)
    //         if (y > this.y) {
    //             y = this.y - 10
    //         } else {
    //             y = this.y + 10
    //         }
    //     }
    //     this.moveBody()
    //     this.head.style.left = x + 'px';
    //     this.head.style.top = y + 'px';
    // }

    addBody() { //beforeend 在当前结束标签之前添加元素
        this.element.insertAdjacentHTML('beforeend', '<div></div>')
    }
    //添加一个蛇身体移动的方法
    moveBody() {
        //遍历获取所有的身体 
        //因为要让后一节变成前一节的位置 所以得从后往前遍历  
        //如果先改前面一节的位置 就会导致蛇身体叠加
        //i<0 排除蛇头 
        for (let i = this.bodies.length - 1; i > 0; i--) {
            //获取前边身体的位置
            let X = (this.bodies[i - 1] as HTMLElement).offsetLeft;
            let Y = (<HTMLElement>this.bodies[i - 1]).offsetTop;

            //修改当前身体的值
            (this.bodies[i] as HTMLElement).style.left = X + 'px';
            (this.bodies[i] as HTMLElement).style.top = Y + 'px';

        }
    }
    //用来检查蛇头是否撞到自己的身体
    checkHeadBody() {
        for (let i = 1; i < this.bodies.length; i++) {
            let dom = this.bodies[i] as HTMLElement
            if (this.x === dom.offsetLeft && this.y === dom.offsetTop) {
                throw new Error('蛇撞到自己了！')
            }
        }
    }
}

export default Snake